<script setup>
import login from '@/views/login/login.vue'
import router from "@/router/index.js";

//跳转到登录页面
function loginView() {
  router.push('/login');


}
</script>

<template>
<!--
      首先展示的门户页面
      中间登录跳转到登录页面
-->
  <div class="common-layout">
    <el-container class="el-container">
      <el-header class="header">
        <h1 class="headerh1" style="font-size: 30px">家校通信息门户</h1>
      </el-header>

      <el-main class="main">
        <h2 class="mainh2">艰苦朴素 实事求是</h2>
        <h3 class="mainh3">严谨要求 勇于探索</h3>
        <el-button class="login" @click="loginView">登录</el-button>

        <!-- 公告和新闻标题部分 -->
        <div class="titles">
          <h1 class="announcement-title">公告</h1>
          <h2 class="news-title">新闻</h2>
        </div>

        <div class="report-container">
          <div class="report">
            <h1>学校庆功会本周将在校园举行，届时邀请所有家长参加</h1>
            <h1>新校园图书馆即将开放，为学生提供更多学习资源</h1>
            <h1>学生作品展示活动即将启动，展示学生的创造力与才华</h1>
            <h1>本周末将举行学校体育节，各班级将展开激烈的竞赛</h1>
            <h1>学术讲座最新时间安排公布，欢迎家长和学生参加交流</h1>
          </div>
          <div class="report2">
            <h2>学校文化节即将盛大开幕，预备好迎接文化盛宴</h2>
            <h2>校园绿化行动启动，希望学生积极参与美化环境</h2>
            <h2>学生表现优秀，荣获区域数学竞赛冠军</h2>
            <h2>新校长亲临班级，与学生家长共话教育发展</h2>
            <h2>校园安全日推出，教师学生共同关注校园安全</h2>
          </div>
        </div>

      </el-main>

      <el-footer class="footer" style="text-align: center">孜孜不倦默默无闻,写不出码要崩溃队</el-footer>
    </el-container>
  </div>

</template>

<style scoped>
.common-layout{
  background-color: #cce5ff;
  background-image:
      radial-gradient(closest-side,rgba(20, 134, 182, 1),rgba(20, 243, 20, 0));
  background-size:
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
  background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 8s movement linear infinite;
  height: 100vh;
}
.main{
  padding: 20px; /* 顶部留出一定的内边距 */
  width: 70%; /* 主体内容宽度占比 */
  margin: 60px auto; /* 水平居中 */
  text-align: center; /* 让内部文本居中 */
}
.mainh2 {
  font-size: 65px; /* 设置mainh2字体大小 */
  margin-left: 0px;
  font-family: "楷体",serif;
  color: white; /* 设置字体颜色为白色 */
  font-weight: bolder;
  padding-top: 0px;
}

.mainh3 {
  font-size: 65px; /* 设置mainh3字体大小 */
  margin-left: 30%; /* 距离左边40% */
  font-family: "楷体",serif;
  color: white; /* 设置字体颜色为白色 */
  font-weight: bolder;
  //padding-top: 10px;
  padding-top: 0px;
}
.header{
  background-color: #8dc6e6;
  padding: 10px;
}
.headerh1{
  font-size: 30px;
  color: white;
  margin: 0;
  padding-left: 15px;

}
.login {
  background-color: skyblue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.5s ease; /* 添加过渡效果 */
  width: 150px;
  height: 50px;

}
.login:hover {
  background-color: steelblue;
  transition-delay: 0.05s; /* 延迟过渡效果 */
}
.report-container {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 让子元素在父容器内均匀分布，两端对齐 */
  margin-top: 20px; /* 适当的上边距 */
}

.report, .report2 {
  flex: 1; /* 平分父容器的空间 */
  background-color: rgba(0, 0, 0, 0.1); /* 设置背景颜色 */
  padding: 0px; /* 内边距 */
  font-family: Arial,serif;
  color: white; /* 设置字体颜色为白色 */
  text-align: left;
  padding-left: 20px;
}
/* 新增样式部分 */
.titles {
  display: flex;
  justify-content: space-between;
  padding: 0 20px; /* 添加一定的内边距 */
}

.announcement-title {
  margin: 0; /* 清除默认的标题上下边距 */
  font-size: 30px; /* 调整字体大小 */
  font-family: Arial,serif;
  color: black; /* 设置字体颜色为白色 */
}

.news-title {
  margin: 0; /* 清除默认的标题上下边距 */
  font-size: 30px; /* 调整字体大小 */
  font-family: Arial,serif;
  color: black; /* 设置字体颜色为白色 */
}
.footer{
  font-size: 15px;
  padding-top: 100px;
}
</style>